<template>
	<view class="package-model">
		<view v-show="current === 0">
			<view class="package-title">套餐选择</view>
			<view class="package-box">
				<view class="package-box-item" @click="changePackage(index,item)"
					:class="currentPackage===index?'act-btn':''" v-for="(item,index) in packageList" :key="index">
					<view>{{item.hour}}小时</view>
					<view class="package-box-item-price">￥{{item.price}}元</view>
				</view>
			</view>
			<view class="noPackageTip" v-if="packageList.length === 0">暂无套餐，请选择小时模式</view>
		</view>
		<view class="time-main" v-if="current === 1">
			<view>时间选择</view>
			<view class="time-box">
				<uni-number-box :min="1" :max="23" @change="changeTime" :value="pkNum" />
			</view>
		</view>
		<view class="time-main" v-if="(current === 0 && packageList.length >0) || current === 1">
			<view>时间选择</view>
			<view class="time-box">
				<view class="time-date" v-if="packageObj.startTime">{{packageObj.startTime.substring(0,10)}}</view>
				<picker class="custom-picker" mode="multiSelector" :value="multiIndex" :range="newTimeList"
					range-key="label" @change="pickerChange" @columnchange="pickerColumnchange">
					<view class="time-text">{{time || '请选择开始时间'}}</view>
				</picker>
				<text class="time-mid">至</text>
				<view class="time-date" v-if="packageObj.endTime">{{packageObj.endTime.substring(0,10)}}</view>
				<text>{{endTime || '结束时间'}}</text>
			</view>
		</view>
		<view class="time-line-box">
			<timeLineBar :bookingTimeVo="bookingTimeVo"></timeLineBar>
		</view>
	</view>
</template>

<script>
	import {
		onMounted
	} from "vue";
	import timeLineBar from '@/components/time-line-bar.vue'
	// 防抖函数
	function debounce(func, wait) {
		let timeout;
		return function() {
			const context = this;
			const args = arguments;
			clearTimeout(timeout);
			timeout = setTimeout(() => {
				func.apply(context, args);
			}, wait);
		};
	}
	export default {
		name: "package-model",
		components: {
			timeLineBar
		},
		props: {
			current: {
				type: Number,
				default: 0
			},
			currentDate: {
				type: Number,
				default: 0
			},
			bookingTimeVo: {
				tyep: Object,
				default: {}
			},
			packageList: {
				type: Array,
				default: []
			},
			dateArr: {
				type: Array,
				default: []
			}
		},
		watch: {
			current(newVal, oldVal) {
				this.time = ''
				this.endTime = ''
				this.pkNum = 1
				this.packageObj = {}
				this.currentPackage = -1
			},
			currentDate(newVal, oldVal) {
				this.time = ''
				this.endTime = ''
				this.pkNum = 1
				this.currentPackage = -1
				this.packageObj = {}
			},
			bookingTimeVo: {
				handler() {
					this.newTimeList = [
						[],
						[]
					]
					this.multiIndex = [0, 0]
					this.initTime()
				},
				deep: true,
				immediate: true
			},

		},
		data() {
			return {
				currentPackage: -1,
				time: '',
				endTime: '',
				pkNum: 1,
				packageObj: {},
				newTimeList: [
					[],
					[]
				],
				multiIndex: [0, 0]
			};
		},
		methods: {
			initTime() {
				this.newTimeList[0] = this.bookingTimeVo.timeList.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: String(item.hour),
						value: item.hour
					}
					return obj
				})
				this.newTimeList[1] = this.bookingTimeVo.timeList[this.multiIndex[0]].minuteList.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: String(item),
						value: item
					}
					return obj
				})
			},
			pickerChange(e) {
				//	console.log('pickerChange:', e.detail.value);
				let numArr = e.detail.value
				let hour = this.bookingTimeVo.timeList[numArr[0]].hour
				let minute = this.bookingTimeVo.timeList[numArr[0]].minuteList[numArr[1]]
				if (hour < 10) {
					hour = `0${hour}`
				}
				if (minute < 10) {
					minute = `0${minute}`
				}
				this.time = `${hour}:${minute}`
				this.countTime()
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value;

					this.newTimeList[1] = this.bookingTimeVo.timeList[this.multiIndex[0]].minuteList.map((item, index) => {
						// console.log('item:',item);
						var obj = {
							label: String(item),
							value: item
						}
						return obj
					})
					this.multiIndex.splice(1, 1)
				}
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
				}
			},

			// 选择套餐
			changePackage(index, item) {
				if (this.currentPackage !== index) {
					this.currentPackage = index
					this.packageObj = {
						productId: item.productId,
						packageId: item.packageId,
						hour: item.hour
					}
					if (this.time) {
						this.countTime()
					} else {
						this.$emit('changePackage', this.packageObj)
					}
				}
			},
			// 防抖
			debounceEvent: debounce(function() {
				if (this.current === 1) {
					this.packageObj.hour = this.pkNum
				}
				this.$emit('changePackage', this.packageObj)
			}, 1000),
			// 选择时长
			changeTime(e) {
				this.$nextTick(() => {
					this.pkNum = e
					this.packageObj = {
						hour: this.pkNum
					}
					this.countTime()
				})
			},
			// 时间选择
			bindTimeChange(e) {
				this.time = e.detail.value
				if (this.current === 0 && this.packageList[this.currentPackage]?.hour) {
					this.countTime()
				} else {
					// 选择小时模式
					this.packageObj = {
						hour: this.pkNum
					}
					this.countTime()
				}
			},
			// 计算时间
			countTime() {
				let dateStartState = 'today'
				let dateEndState = 'today'
				if (this.time) {
					if (new Date(`${this.dateArr[this.currentDate].date} ${this.time}:00`).getTime() - new Date()
						.getTime() < 0) {
						dateStartState = 'tomorrow'
					}
					let hour = Number(this.time.substring(0, 2))
					let hour3 = this.time.substring(2, 5)
					let pkNum = 0
					if (this.current === 1) {
						pkNum = this.pkNum
					} else if (this.current === 0 && this.packageList[this.currentPackage]?.hour) {
						pkNum = Number(this.packageList[this.currentPackage].hour)
					} else {
						// 不计算
						return
					}
					let sum = hour + pkNum
					if (sum >= 24) {
						dateEndState = 'tomorrow'
						if (dateStartState === 'tomorrow') {
							dateEndState = 'threeDay'
						}
					}
					if (sum < 10) {
						this.endTime = '0' + sum + hour3
					} else {
						sum %= 24
						if (sum < 10) {
							this.endTime = '0' + sum + hour3
						} else {
							this.endTime = sum + hour3
						}
					}
					switch (dateStartState) {
						case 'today':
							this.packageObj.startTime = `${this.dateArr[this.currentDate].date} ${this.time}:00`
							this.packageObj.endTime =
								`${dateEndState ==='tomorrow'?this.dateArr[this.currentDate+1].date:this.dateArr[this.currentDate].date} ${this.endTime}:00`
							break;
						case 'tomorrow':
							this.packageObj.startTime = `${this.dateArr[this.currentDate+1].date} ${this.time}:00`
							this.packageObj.endTime =
								`${dateEndState ==='threeDay'?this.dateArr[this.currentDate+2].date:this.dateArr[this.currentDate+1].date} ${this.endTime}:00`
							break;
					}

					this.debounceEvent()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.package-model {
		background: #FFF;
		padding: 20rpx;

		.package-title {
			font-size: 22rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.noPackageTip {
			text-align: center;
			color: #CCC;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.package-box {
			display: flex;
			flex-wrap: wrap;
			padding: 0 12rpx;

			&-item {
				margin: 0 6rpx 20rpx 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				color: #666;
				border: 1px solid #999;
				border-radius: 12rpx;
				padding: 26rpx 16rpx;
				overflow: hidden;


				&-price {
					color: #f54d54;
					font-weight: bold;
					font-size: 20rpx;
					margin-left: 20rpx;
				}
			}

			.act-btn {
				border: 1px solid #f54d54;
				background: #fff9e3;
				position: relative;
			}

			.act-btn::after {
				content: '√';
				color: #FFF;
				text-align: center;
				position: absolute;
				width: 26rpx;
				height: 26rpx;
				background: #f54d54;
				bottom: 0;
				right: 0;
				border-radius: 10rpx 0 0 0;
			}
		}

		.time-main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			font-size: 24rpx;

			.time-box {
				display: flex;
				align-items: center;
				color: #666666;
				padding-right: 30rpx;
			}

			.time-text {
				border-radius: 8rpx;
				border: 1px solid #999999;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				text-align: center;
			}

			.time-mid {
				margin: 0 20rpx;
			}

			.time-date {
				margin-right: 10rpx;
				color: #000;
			}
		}

		.time-line-box {
			margin-top: 30rpx;
		}


	}
</style>